<template>
  <div>


    <el-menu
        class="el-menu-vertical-demo"
        default-active="2"
        style=" :width=”collapse？'64px':'200px'“;min-height: calc(100vh - 70px)"
        @close="handleClose"
        @open="handleOpen"
        :collapse="collapse"
    >
      <!--      <div><el-icon><Minus /></el-icon></div>-->
      <!--      <el-button  width="64px" @click="collapse = !collapse" type="info" plain >-->
      <div style="padding-left: 20px">
        <el-icon :size="30" @click="collapse = !collapse" style="cursor: pointer;color: #3498db" v-if="collapse">
          <Expand/>
        </el-icon>
        <el-icon :size="30" @click="collapse = !collapse" style="cursor: pointer;color: #f8a7dd" v-if="!collapse">
          <Fold/>
        </el-icon>
      </div>


      <el-sub-menu index="1" v-if="roleMenuList.pet.length > 0">
        <template #title>
          <img src="../assets/img/chongwu1.png" class="img">
          <span>我的宠物</span>
        </template>
        <el-menu-item-group title="宠物">
          <el-menu-item index="1-1" @click="navigateToPath('PetInfo')" v-if="checkPetHave('PetInfo')">基本信息
          </el-menu-item>
          <el-menu-item index="1-2" @click="navigateToPath('HealthInfo')" v-if="checkPetHave('HealthInfo')">健康状况
          </el-menu-item>
          <el-menu-item index="1-3" @click="navigateToPath('PhysicalHistory')" v-if="checkPetHave('PhysicalHistory')">
            体检历史
          </el-menu-item>
        </el-menu-item-group>


      </el-sub-menu>
      <el-sub-menu index="2" v-if="roleMenuList.info.length > 0">
        <template #title>
          <img src="../assets/img/user-manage.png" class="img">
          <span>用户信息管理</span>
        </template>
        <el-menu-item-group title="使用者">
          <el-menu-item index="2-1" @click="navigateToPath('Admin')" v-if="checkInfoHave('Admin')">管理员</el-menu-item>
          <el-menu-item index="2-2" @click="navigateToPath('CommonUser')" v-if="checkInfoHave('CommonUser')">普通用户
          </el-menu-item>
          <el-menu-item index="2-3" @click="navigateToPath('roleController')" v-if="checkInfoHave('roleController')">
            权限控制
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-menu-item index="3" v-if="checkCommonHave('AnnouncementManagement')">
        <img src="../assets/img/gonggaoguanli.png" class="img">
        <span @click="navigateToPath('AnnouncementManagement')">系统公告管理</span>
      </el-menu-item>
      <el-menu-item index="4" v-if="checkCommonHave('DiseaseWarning')">
        <el-icon>
          <WarnTriangleFilled/>
        </el-icon>
        <span @click="navigateToPath('DiseaseWarning')">疾病预警</span>
      </el-menu-item>
      <el-menu-item index="5" v-if="checkCommonHave('HealthReports')">
        <el-icon>
          <Tickets/>
        </el-icon>
        <span @click="navigateToPath('HealthReports')">宠物健康报告</span>
      </el-menu-item>
      <el-menu-item index="6" v-if="checkCommonHave('Vaccination')">
        <img src="../assets/img/zhen.png" class="img">
        <span @click="navigateToPath('Vaccination')">疫苗接种</span>
      </el-menu-item>
      <el-menu-item index="7" v-if="checkCommonHave('PhysicalRecord')">
        <img src="../assets/img/tijian.png" class="img">
        <span @click="navigateToPath('PhysicalRecord')">体检记录</span>
      </el-menu-item>
      <el-menu-item index="8" v-if="checkCommonHave('PhysicalManagement')">
        <img src="../assets/img/jiguan.png" class="img">
        <span @click="navigateToPath('PhysicalManagement')">体检记录管理</span>
      </el-menu-item>
      <el-menu-item index="9" v-if="checkCommonHave('SystemNotice')">
        <img src="../assets/img/gonggao.png" class="img">
        <span @click="navigateToPath('SystemNotice')">系统公告</span>
      </el-menu-item>
      <el-menu-item index="10" v-if="checkCommonHave('PetFile')">
        <img src="../assets/img/dangan.png" class="img">
        <span @click="navigateToPath('PetFile')">宠物档案管理</span>
      </el-menu-item>
      <el-menu-item index="11" v-if="checkCommonHave('PersonalCenter')">
        <img src="../assets/img/geren.png" class="img">
        <span @click="navigateToPath('PersonalCenter')">个人中心</span>
      </el-menu-item>
    </el-menu>

    <!--<el-icon><location/></el-icon>-->
  </div>
</template>

<script>
import {Apple, Tickets, House, User, WarnTriangleFilled} from "@element-plus/icons-vue";
import {Cpu, Expand, Fold, FullScreen, Plus} from "@element-plus/icons";
import {goto} from "@/utils/pathUtil";
import {decrypt} from "@/utils/aes";
import {getMenuList} from "@/api/user";

export default {
  name: "Aside.vue",
  methods: {
    navigateToPath(path) {
      this.$router.push('/' + path)
    },
    checkPetHave(path) {
      return this.roleMenuList.pet.some(v =>
          v.path.replace('/', '') === path
      );
    },
    checkInfoHave(path) {
      return this.roleMenuList.info.some(v =>
          v.path.replace('/', '') === path
      );
    },
    checkCommonHave(path) {
      return this.roleMenuList.common.some(v =>
          v.path.replace('/', '') === path
      );
    },
    getUserInfo() {
      const type = localStorage.getItem('userType');
      let role = 0
      if (type) {
        switch (type) {
          case 'admin':
            role = 1
            break;
          case 'user':
            role = 2
            break;
        }
        getMenuList(role).then(res => {
          console.log(res.data)
          res.data.forEach(v => {
            if (v.path === '/PetInfo') {
              this.roleMenuList.pet.push(v)
            }
            if (v.path === '/HealthInfo') {
              this.roleMenuList.pet.push(v)
            }
            if (v.path === '/DiseaseWarning') {
              this.roleMenuList.common.push(v)
            }
            if (v.path === '/Admin') {
              this.roleMenuList.info.push(v)
            }
            if (v.path === '/CommonUser') {
              this.roleMenuList.info.push(v)
            }
            if (v.path === '/roleController') {
              this.roleMenuList.info.push(v)
            }
            if (v.path === '/AnnouncementManagement') {
              this.roleMenuList.common.push(v)
            }
            if (v.path === '/HealthReports') {
              this.roleMenuList.common.push(v)
            }
            if (v.path === '/PhysicalHistory') {
              this.roleMenuList.pet.push(v)
            }
            if (v.path === '/Vaccination') {
              this.roleMenuList.common.push(v)
            }
            if (v.path === '/PhysicalRecord') {
              this.roleMenuList.common.push(v)
            }
            if (v.path === '/SystemNotice') {
              this.roleMenuList.common.push(v)
            }
            if (v.path === '/PetFile') {
              this.roleMenuList.common.push(v)
            }
            if (v.path === '/PersonalCenter') {
              this.roleMenuList.common.push(v)
            }
            if (v.path === '/PhysicalManagement') {
              this.roleMenuList.common.push(v)
            }
          })
          console.log(this.roleMenuList)
        })
      } else {
        this.$router.push('/login')
      }

    },
  },
  data() {
    return {
      collapse: false,
      roleMenuList: {
        pet: [],
        info: [],
        common: []
      }
    }
  },
  mounted() {
    this.getUserInfo()

  }
  ,
  components: {
    Fold, Expand, FullScreen, Plus, Cpu, Apple, Tickets, House, User, WarnTriangleFilled
  }
}
</script>


<style scoped>
.img {
  width: 18px;
  height: 18px;
  margin-left: 5px;
  margin-right: 5px;

}
</style>